<template>
  <div :class="{myEdit:inline}" >
    <div v-if="!isShow">
      <el-input
      :disabled="disabled"
      type="textarea"
      style="width: 70%;"
      autosize
      :size="size"
      v-model="content"
      :placeholder="placeholder"
    >
    </el-input>
    <el-button
    size="mini"
    :disabled="disabled"
    slot="append"
    icon="el-icon-edit"
    @click="isShow=true"
  >高级</el-button>
    </div>
   
    <div v-else>
      <div v-if="useDialog">
        <MDialog
          @close="handleClose"
          @submit="handleSubmit"
          v-if="isShow"
          cancel="取消"
          confirm="确定"
          title="编辑"
        >
          <vue-ueditor-wrap :disabled="disabled" :size="size" v-model="content"></vue-ueditor-wrap>
        </MDialog>
      </div>
      <div v-else>
        <vue-ueditor-wrap :disabled="disabled" :size="size" v-model="content"></vue-ueditor-wrap>
        <el-button
          :disabled="disabled"
          size="mini"
          class="bt"
          icon="el-icon-edit"
          @click="isShow=false"
        >普通</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import MDialog from "@/components/MDialog";
export default {
  name: "myEdit",
  components: {
    VueUeditorWrap,
    MDialog
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: ""
    },
    inline: {
      type: Boolean,
      default: false
    },
    useDialog: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false,
      content: ""
    };
  },
  created() {
    this.content = this.value;
  },
  methods: {
    handleClose() {
      this.isShow = false;
    },
    handleSubmit() {}
  },
  watch: {
    content: function(val) {
      this.$emit("input", val);
    },
    value: function(val) {
      this.content = val;
    }
  }
};
</script>

<style>
.bt {
  position: absolute;
  top: 1.4px;
  left: 700px;
  z-index: 1000;
}
.myEdit {
  display: inline-block;
  line-height: 33px;
}
.edui-editor-toolbarbox {
  line-height: 20px;
}
.el-dialog__body {
  padding: 7px 20px;
}

</style>